<template>
  <el-aside width="298px">
    <div class="side-title">
      <!-- <el-image class="logo-img-item" :src="logoSrc"></el-image> -->
      <div class="name-item">示例平台</div>
    </div>
    <el-menu
        active-text-color="#8284FA"
        :default-active="$route.path"
        exact
        router
        unique-opened
        @select="selectMenu($route.path)"
    >
      <NavItem v-for="item in items" :key="item.path" :item="item"></NavItem>
    </el-menu>
  </el-aside>
</template>
<script>
import NavItem from "./navItem";
export default {
  name: "Sidebar",
  components: {
    NavItem,
  },
  data() {
    return {
      // logoSrc: require("@/assets/img/aside/logo.png"),
      items: [
        {
          name: "首页",
          path: "/home/index",
          // iconSrc: require("@/assets/img/aside/6@2x.png"),
          // iconActiveSrc: require("@/assets/img/aside/6@2xActive.png")          
        },
        {
          name: "基础资料",
          path: "/basicInfo",
          // iconSrc: require("@/assets/img/aside/7@2x.png"),
          // iconActiveSrc: require("@/assets/img/aside/7@2xActive.png"),
          children: [
            {
              name: "产品清单",
              path: "/basicInfo/productInfo"
            },
            {
              name: '物料清单',
              path: '/basicInfo/materialInfo'
            },
            {
              name: "产品bom",
              path: "/basicInfo/productBom"
            },            
          ]
        },
        {
          name: "采购订单",
          path: "/purchase/purchase",
          // iconSrc: require("@/assets/img/aside/8@2x.png"),
          // iconActiveSrc: require("@/assets/img/aside/8@2x.png"),
          // children: [
          //   {
          //     name: 'slot插槽',
          //     path: '/vueSkill/slot'
          //   },
          //   {
          //     name: '翻页滚动',
          //     path: '/vueSkill/infiniteScroll'
          //   },
          //   {
          //     name: 'VUE插件示例',
          //     path: '/vueSkill/pluginComs'
          //   },
          //   {
          //     name: '过滤器',
          //     path: '/vueSkill/filterVue'
          //   },
          //   {
          //     name: '日历',
          //     path: '/vueSkill/calendar'
          //   }
          // ]
        },
        {
          name: "仓库管理",
          path: "/store",
          // iconSrc: require("@/assets/img/aside/8@2x.png"),
          // iconActiveSrc: require("@/assets/img/aside/8@2x.png"),
          children: [
            {
              name: '来料检验',
              path: '/store/fromCheck'
            },
            {
              name: '入库管理',
              path: '/store/inManage'
            },
            {
              name: '库存管理',
              path: '/store/storeManage'
            },
            {
              name: '出库管理',
              path: '/store/outManage'
            }
          ]
        }
      ],
    };
  },
  methods:{
    selectMenu(index){
      console.log(index)
    }
  }
};
</script>
<style lang="scss" scoped>
.el-aside {
  width: 298px;
  background: #ffffff;
  box-shadow: 6px 0px 10px rgba(214, 214, 214, 0.16);
  opacity: 1;
  .el-menu{
    border: 0;
  }
  .side-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 298px;
    height: 84px;
    background: #8284fa;
    opacity: 1;
    .logo-img-item {
      width: 38px;
      height: 38px;
      background: rgba(0, 0, 0, 0);
      opacity: 1;
      margin-right: 13px;
    }
    .name-item {
      width: 154px;
      height: 29px;
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 29px;
      color: #ffffff;
      opacity: 1;
    }
  }
}
</style>